import React, { useState,useEffect } from 'react'
import { Table, Row, Col, Button, Input } from "antd"
import './style.scss'
import TableGood from './components/TableGood'
import SelectCateGood from './components/SelectCateGood'


import { useAppDispatch,useAppSelector } from "@/hooks"
import{ getgoodlist,goodinit} from '@/store/actions'

const data = [
  {
    id: 1,
    name: '小米手机',
    img: '/img/1.png',
    desc: '',
    hot: false,
    price: 23.00,
    cate: 'office'
  }
]



export default props =>{
  console.log(props);
  
  let [name,setname] = useState('')
  let [page,setpage] = useState(1)
  let [ size,setsize] = useState(2)
  let [ cate,setcate] = useState('')






  let dispatch = useAppDispatch()
  let goodlist = useAppSelector(store=>store.good.goodlist)
  let total = useAppSelector(store=>store.good.total)
  useEffect(()=>{
    dispatch(getgoodlist({name,page,size,cate}))
    return undefined
  },[name,page,size,cate])

  useEffect(()=>{
    dispatch(goodinit())

  },[])


  return (
    <div className='qf-userlist'>

      <div className='qf-filter'>
        <Row align='middle'>
          <Col span={2}>
            <span>搜索:</span>
          </Col>
          <Col span={4}>
            <Input 
            size='small' 
            placeholder="名称搜索"
            value={name}
            onChange={(e)=>(setname(e.target.value))}
             />
          </Col>
          <Col span={2}>
            <span>品类:</span>
          </Col>
          <Col span={4} >
            <SelectCateGood 
            onChange={(e)=>{(setcate(e),setpage(1))}}
            />
          </Col>
          <Col span={12}>
            <Button
              size='small'
              onClick={()=>props.history.push('/good/info')}
              type="primary">
              添加
            </Button>
          </Col>
        </Row>
      </div>

      <TableGood
        data={goodlist}
        rows={[]}
        total={total}
        onChange = {(e,s)=>{setpage(e);setsize(s)}}
        
      />
      <div></div>
    </div>
  )
}
